﻿<!DOCTYPE html>
<html ng-app="papercutApp">
  <head>
    <title>Papercut</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="referrer" content="no-referrer" />

    <link rel="icon" type="image/png" href="images/papercut.ico" />

    <link rel="stylesheet" href="css/jquery-ui-1.10.4-smoothness.css" />
    <link rel="stylesheet" href="css/bootstrap-3.3.2.min.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body ng-controller="MailCtrl" ng-click="keepopen=false">
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container-fluid">
        <div class="col-md-2 col-sm-3">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">
              <img src="images/papercut-logo.png" height="20" alt="Papercut SMTP">
            </a>
          </div>
        </div>

        <div class="col-md-10 col-sm-9">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a target="_blank" href="https://github.com/ChangemakerStudios/Papercut">
                <img src="images/github.png" height="16" alt="GitHub"> GitHub
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-md-2 col-sm-3">
          <ul class="nav nav-pills nav-stacked">
            <li class="inbox">
              <a href="#" ng-click="backToInboxFirst()">
                Inbox ({{totalMessages}})
              </a>
              <a title="Delete all messages" href="#" class="btn-delete-all glyphicon glyphicon-trash" ng-click="deleteAll()"></a>
            </li>
          </ul>
        </div>

        <div class="col-md-10 col-sm-9 content">
          <div class="toolbar" ng-if="!preview">
  <button class="btn btn-default" ng-click="refresh()" title="Refresh">
    <i class="glyphicon glyphicon-refresh"></i>
  </button>

  <span class="pull-right">
    <span class="message-count" ng-if="(totalMessages || 0) != 0">
      <select ng-model="itemsPerPage" ng-change="showUpdated(itemsPerPage)">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="75">75</option>
        <option value="100">100</option>
      </select>
      <strong>{{ startMessages + 1 }}-{{ startMessages + countMessages }}</strong>
      of
      <strong>{{ totalMessages }}</strong>
    </span>

    <button class="btn btn-default" ng-click="showNewer()" title="Newer" ng-class="{'disabled':startMessages<=0}">
      <i class="glyphicon glyphicon-chevron-left"></i>
    </button>

    <button class="btn btn-default" ng-click="showOlder()" title="Older" ng-class="{'disabled':startMessages+countMessages>=totalMessages}">
      <i class="glyphicon glyphicon-chevron-right"></i>
    </button>
  </span>
</div>

<div class="messages container-fluid" ng-if="!preview">
  <div class="msglist-message row" ng-repeat="message in messages" ng-click="selectMessage(message)">
    <div class="col-md-5 col-sm-5">
      <span class="subject unread">{{ message.Subject }}</span>
    </div>
    <div class="col-md-4 col-sm-3">
      <div class="row">
        <div class="col-md-9 col-sm-12 text-right">
            {{ getMoment(message.CreatedAt).fromNow() }}
        </div>
        <div class="col-md-3 col-sm-12 text-right">
          {{ message.Size }}
        </div>
      </div>
    </div>
  </div>
</div>

<div class="toolbar" ng-if="preview">
  <button class="btn btn-default" ng-click="backToInbox()" title="Back to Inbox">
    <i class="glyphicon glyphicon-arrow-left"></i>
  </button>
</div>

<div class="preview" ng-if="preview">
  <div class="row headers">
    <div class="col-md-10">
      <table>
        <tbody>
          <tr>
            <td class="header-name">From</td>
            <td><span ng-if="!!preview.From[0].Name">{{preview.From[0].Name}}(</span>{{ preview.From[0].Address }}<span ng-if="!!preview.From[0].Name">)</span></td>
          </tr>
        <tr>
            <td class="header-name">To</td>
            <td>
                <label class="mail-address" ng-repeat="to in preview.To">
                    <span ng-if="!!to.Name">{{to.Name}}(</span>{{ to.Address }}<span ng-if="!!to.Name">)</span>
                </label>
            </td>
        </tr>
        <tr ng-if="!!(preview.Cc && preview.Cc.length)">
            <td class="header-name">CC</td>
            <td>
                <label class="mail-address" ng-repeat="c in preview.Cc">
                    <span ng-if="!!c.Name">{{c.Name}}(</span>   {{ c.Address }}<span ng-if="!!c.Name">)</span>
                </label>
            </td>
        </tr>
        <tr ng-if="!!(preview.BCc && preview.BCc.length)">
            <td class="header-name">BCC</td>
            <td>
                <label class="mail-address" ng-repeat="b in preview.BCc">
                    <span ng-if="!!b.Name">{{b.Name}}(</span>   {{ b.Address }}<span ng-if="!!b.Name">)</span>
                </label>
            </td>
        </tr>
        <tr ng-if="!!preview.Date">
            <td class="header-name">Date</td>
            <td>
                {{preview.Date}}
            </td>
        </tr>
        <tr>
            <td class="header-name">Subject</td>
            <td><strong>{{ preview.Subject }}</strong></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="mail-content">
  <span class="download-raw pull-right">
    <a ng-href="api/messages/{{preview.Id}}/raw" target="_blank"><span class="glyphicon glyphicon-cloud-download"></span> Download raw message</a>
  </span>
      <ul class="nav nav-tabs">
        <li ng-if="hasHTML(preview)" ng-class="{ active: hasHTML(preview) }"><a href="#preview-html" data-toggle="tab">HTML</a></li>
        <li ng-if="hasText(preview)" ng-class="{ active: !hasHTML(preview) }"><a href="#preview-plain" data-toggle="tab">Plain text</a></li>
        <li><a href="#preview-headers" data-toggle="tab">Headers</a></li>
        <li><a href="#preview-sections" data-toggle="tab">Sections</a></li>
    </ul>

    <div class="tab-content">
      <iframe target-blank="" ng-if="hasHTML(preview)" ng-class="{ active: hasHTML(preview) }" class="tab-pane" id="preview-html" body-html="preview.previewHTML" content-link-message-id="preview.Id" seamless frameborder="0" style="width: 100%"></iframe>
      <div class="tab-pane" ng-class="{ active: !hasHTML(preview) }" id="preview-plain" ng-bind-html="formatMessagePlain(preview)"></div>
        <div class="tab-pane" id="preview-headers">
            <ul>
                <li ng-repeat="header in preview.Headers">
                    <span class="header-name">{{header.Name}}</span>: {{header.Value}}
                </li>
            </ul>
        </div>
        <div class="tab-pane" id="preview-sections">
            <table>
                <thead>
                    <th>MEDIA TYPE</th>
                    <th>FILENAME</th>
                    <th>SAVE</th>
                </thead>
                <tbody>
                <tr ng-repeat="section in preview.Sections">
                    <td>{{section.MediaType}}</td>
                    <td>{{section.FileName}}</td>
                    <td><a title="Download and save section content" ng-href="api/messages/{{preview.Id}}/sections/{{$index}}" target="_blank" class="glyphicon glyphicon-download-alt"></a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
  </div>
</div>


        </div>
      </div>
    </div>

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery-ui-1.10.4.min.js"></script>
    <script src="js/bootstrap-3.3.2.min.js"></script>
    <script src="js/angular-1.3.8.js"></script>
    <script src="js/moment-2.8.4.js"></script>
    <script src="js/controllers.js"></script>
  </body>
</html>
